<template>
	<view class="main">
		<view class="header">社区门禁</view>
		<view class="gate-list">
			<view v-for="(gate, index) in gates" :key="index" class="gate-item">
				<view class="gate-info">
					<view class="gate-name">{{ gate.name }}</view>
					<view class="gate-location">{{ gate.location }}</view>
				</view>
				<button class="open-button" @click="openGate(gate.id)">开门</button>
			</view>
		</view>
		<wd-message-box></wd-message-box>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		useMessage
	} from '@/uni_modules/wot-design-uni'
	import {
		toast
	} from "../../uni_modules/uv-ui-tools/libs/function";

	const message = useMessage()

	// 模拟门禁数据
	const gates = ref([{
			id: 1,
			name: "北门",
			location: "靠近停车场"
		},
		{
			id: 2,
			name: "南门",
			location: "靠近小区主路"
		},
		{
			id: 3,
			name: "东门",
			location: "靠近商场入口"
		},
	]);

	// 开门操作
	const openGate = (gateId) => {
		// 模拟开门接口调用
		// console.log(`正在开门，门禁ID: ${gateId}`);
		// alert(`开门成功，门禁ID: ${gateId}`);
		message
			.confirm({
				msg: `门禁ID: ${gateId}`,
				title: '确定打开门禁'
			})
			.then(() => {
				console.log('点击了确认按钮')
				toast(`开门成功，门禁ID: ${gateId}`)
			})
			.catch(() => {
				console.log('点击了取消按钮')
			})
	};
	
</script>

<style>
	.main {
		min-height: 100vh;
		background-color: rgb(238, 238, 238);
		padding: 2vw;
	}

	.header {
		font-size: 24px;
		font-weight: bold;
		margin-bottom: 2vw;
		text-align: center;
	}

	.gate-list {
		display: flex;
		flex-direction: column;
		gap: 2vw;
	}

	.gate-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #fff;
		padding: 2vw;
		border-radius: 5px;
		box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
	}

	.gate-info {
		display: flex;
		flex-direction: column;
	}

	.gate-name {
		font-size: 18px;
		font-weight: bold;
	}

	.gate-location {
		font-size: 14px;
		color: #666;
	}

	.open-button {
		background-color: #007aff;
		color: #fff;
		border: none;
		border-radius: 5px;
		padding: 5px 10px;
		font-size: 14px;
		cursor: pointer;
	}

	.open-button:hover {
		background-color: #005ecb;
	}

	.open-button {
		margin: 0;
	}
</style>